import { useEffect } from 'react';
import { connect } from 'dva';
import { PageHeader, Table, Tag, Space } from 'antd';
import { Link } from 'umi';

const { Column, ColumnGroup } = Table;

function EmployeeList({ employees, dispatch }) {
  // componentDidMount
  useEffect(() => {
    dispatch({
      type: 'employees/getAll',
    });
  }, []);

  return (
    <div>
      <PageHeader title="Employee List Page" />
      <Table dataSource={employees}>
        <ColumnGroup title="Name">
          <Column title="First Name" dataIndex="firstName" key="firstName" />
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
        </ColumnGroup>
        <Column title="Age" dataIndex="age" key="age" />
        <Column title="Address" dataIndex="address" key="address" />
        <Column
          title="Tags"
          dataIndex="tags"
          key="tags"
          render={(tags) => (
            <>
              {tags.map((tag) => (
                <Tag key={tag}>{tag}</Tag>
              ))}
            </>
          )}
        />
        <Column
          title="Action"
          key="action"
          render={(text, record) => (
            <Space size="middle">
              <Link to={'/employee/' + record.key}>Edit {record.lastName}</Link>
              <a
                onClick={() =>
                  dispatch({
                    type: 'employees/delete',
                    payload: {
                      key: record.key,
                    },
                  })
                }
              >
                Delete
              </a>
            </Space>
          )}
        />
      </Table>
    </div>
  );
}

export default connect(({ employees }) => ({ employees }))(EmployeeList);
